import React, {Component} from 'react';
import {connect} from 'react-redux';
import Top from '../../component/top/top';
import FootCon from '../../component/footCon/footCon';
import {setRouterName} from '../../store/public/action';
import ArticleDetail from './articlesDetail/articlesDetail';
import ArticlesRecommend from './articlesRecommend/articlesRecommend';
import ArticlesOther from './articlesOther/articlesOther';
import Loading from '../../component/loading/loading'

import {setArticles} from '../../store/articles/action';
import articleBannerImg from '../../static/img/article/articles_banner01.jpg'

import axios from 'axios'
import './articles.scss';

import Mock from 'mockjs'

Mock.mock('/sss?2', {
    "articlesDetail":
        {
            "adTitle": "为什么花儿这么红",
            "adkeyWord": ["呵呵", "金苛娜", "文化部"],
            "adContent": "不同颜色的橱柜门给人呈现的效果不一样的，红色热烈奔放，白色婉约，灰色沉稳，蓝色清爽……今天，小编整理了一份橱柜门颜色效果图，希望能对大家选择橱柜门颜色有所帮助。橱柜门什么颜色好看这样的搭配简单素雅干净，对于那些喜欢洁净、安静环境的朋友来说，是一个很不错的选择，但是白色的不耐脏，用一段时间之后就可能犯旧了。因此，平时要注意保养。<img src='http://www.w3school.com.cn/i/eg_tulip.jpg' alt='pic' />"
        },
    "articlesRecom": [
        {
            "arTitle": "Google",
            "arContent": "啊四大皆空",
            "arImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "arRead": "1994",
            "arLike": "886"
        },
        {
            "arTitle": "Baidu",
            "arContent": "啊四大皆空",
            "arImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "arRead": "1994",
            "arLike": "886"
        },
        {
            "arTitle": "SoSo",
            "arContent": "啊四大皆空",
            "arImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "arRead": "1994",
            "arLike": "886"
        }
    ],
    "articlesOther": [
        {
            "aoTitle": "Google",
            "aoImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "aoPrice": "5465"
        },
        {
            "aoTitle": "Baidu",
            "aoImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "aoPrice": "5465"
        },
        {
            "aoTitle": "SoSo",
            "aoImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "aoPrice": "5465"
        }
    ]
});

class Articles extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        }
    }

    componentWillMount() {
        this.props.setRouterName(this.props.location.pathname, this.props.history);
        axios.get(`http://shopapi.3d-home.cn/article1`)
            .then(response => {
                if (response.data !== null) {
                    this.props.setArticles(response.data.articlesDetail, response.data.articlesRecom, response.data.articlesOther);
                    this.setState({
                        loading: true
                    })
                }else {
                    console.log(response)
                }
            })
    }

    render() {
        return (
            <div className='article'>
                <Top></Top>
                {!this.state.loading
                    ? <Loading></Loading>
                    : <div>
                        <div className='storeBanner'>
                            <img src={articleBannerImg} alt='文章banner'/>
                        </div>
                        < ArticleDetail></ArticleDetail>
                        <div className='grayBlock'></div>
                        <ArticlesRecommend></ArticlesRecommend>
                        <div className='grayBlock'></div>
                        <ArticlesOther></ArticlesOther>
                        <FootCon></FootCon>
                    </div>
                }
            </div>
        )
    }

}

const mapStateToProps = (state) => {
    return {
        state: state
    }
}

const mapDispatchToProps = {
    setArticles: setArticles,
    setRouterName: setRouterName
}
export default connect(mapStateToProps, mapDispatchToProps)(Articles)